<template>
  <div class="app-container mod-hot-search">
    <!-- 搜索相关区域 -->
    <div class="filter-container">
      <el-form :inline="true" :model="searchParam" class="demo-form-inline">
        <div>
          <el-form-item
            label="派发屏幕"
            style="width: 300px"
          >
            <el-select
              v-model="searchParam.screenType"
              size="mini"
              placeholder="请选择派发屏幕"
              clearable
            >
              <el-option label="全部" value="0" />
              <el-option label="顶部大屏" value="1" />
              <el-option label="终端默认屏" value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="区域位置">
            <el-cascader
              clearable
              v-model="searchParam.screenArea"
              :options="areaList"
              @change="handleChange1">
            </el-cascader>
          </el-form-item>
          <el-form-item label="任务状态">
            <el-select
              style="width: 200px"
              v-model="searchParam.taskStatus"
              size="mini"
              placeholder="请选择任务状态"
              clearable
            >
              <el-option label="待开始" value="1" />
              <el-option label="展示中" value="2" />
              <el-option label="已过期" value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-date-picker
              v-model="searchParam.createTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 300px"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-search"
              @click="getPage()"
              >查询</el-button
            >
            <el-button
              size="mini"
              icon="el-icon-delete"
              @click="clearSearchInfo()"
              >清空</el-button
            >
          </el-form-item>
        </div>
      </el-form>
      <div class="addpic">
        <div class="dbzdpic">
          <div class="pic" @click="topPic()">顶部大屏默认图片</div>
          <div class="pic" @click="barPic()">终端屏幕默认图片</div>
        </div>
        <el-button
          v-permission="['']"
          icon="el-icon-plus"
          type="primary"
          class="filter-item"
          @click="addOrUpdateHandle()"
          >新增</el-button
        >
      </div>
    </div>
    <!-- 列表相关区域 -->
    <el-table
      v-loading="pageLoading"
      :data="pageVO.list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <!-- 创建时间 -->
      <el-table-column label="创建时间" prop="createTime" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <!-- 派发类型 -->
      <el-table-column label="派发类型" prop="screenType" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.screenType == 1 ? '顶部大屏' : '终端屏' }}</span>
        </template>
      </el-table-column>
      <!-- 派发区域 -->
      <el-table-column label="派发区域" prop="screenArea" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.province + ',' + row.city + ',' + row.area}}</span>
        </template>
      </el-table-column>
      <!-- 派发图频 -->
      <el-table-column label="派发图频" prop="screenUrl" align="center">
        <template slot-scope="{ row }">
          <img
            style="width: 100px; height: 100px"
            :src="resourcesUrl + row.screenUrl"
            alt=""
          />
        </template>
      </el-table-column>
      <!-- 任务时间 -->
      <el-table-column label="任务时间" prop="startTime" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.startTime }}</span>
        </template>
      </el-table-column>
      <!-- 状态 1正常 2离线 -->
      <el-table-column label="状态" prop="taskStatus" align="center">
        <template slot-scope="{ row }">
          <span>{{ row.taskStatus == 1 ? '待开始' : row.taskStatus == 2 ? '展示中' : '已过期'}}</span>
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('table.actions')"
        align="center"
        width="230"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            v-permission="['']"
            type="primary"
            size="mini"
            @click="handleView(row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页条 -->
    <pagination
      v-show="pageVO.total > 0"
      :total="pageVO.total"
      :page.sync="pageQuery.pageNum"
      :limit.sync="pageQuery.pageSize"
      @pagination="getPage()"
    />
    <el-dialog
      title="顶部大屏默认图片"
      :visible.sync="topPicvisible"
      width="800px"
    >
      <el-form label-position="right" ref="topScreen" :model="topScreen" :rules="rules" label-width="80px">
        <el-form-item label="图频文件:" label-width="100px" prop="topScreenDefaultUrl">
          <img-upload v-model="topScreen.topScreenDefaultUrl"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeHandle"> 取消 </el-button>
        <el-button type="primary" @click="topScreenHandle"> 确定 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="终端屏幕默认图片"
      :visible.sync="barPicvisible"
      width="800px"
    >
      <el-form label-position="right" ref="clientScreen" label-width="80px" :model="clientScreen" :rules="rules">
        <el-form-item label="图频文件:" label-width="100px" prop="clientScreenDefaultUrl">
          <img-upload  v-model="clientScreen.clientScreenDefaultUrl" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeHandle"> 取消 </el-button>
        <el-button type="primary" @click="clientScreenHandle"> 确定 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      :title="addOrUpdatetitle"
      :visible.sync="addOrUpdateVisible"
      width="1000px"
    >
      <el-form label-position="right" ref="detailForm" :model="detailObj" :rules="rules">
        <el-form-item label="图频区域：" prop="area">
          <el-cascader
            clearable
            v-model="screenArea"
            :options="areaList"
            @change="handleChange2">
          </el-cascader>
        </el-form-item>
        <el-form-item label="图频位置：" prop="screenType">
          <el-radio-group v-model="detailObj.screenType">
            <el-radio :label="1">顶部大屏</el-radio>
            <el-radio :label="2">终端默认屏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图频文件：" prop="screenUrl">
          <img-upload v-model="detailObj.screenUrl" />
        </el-form-item>
        <el-form-item label="任务日期：" prop="taskTime">
          <el-date-picker
            v-model="detailObj.taskTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 270px"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="任务状态：" prop="taskStatus">
          <el-select v-model="detailObj.taskStatus" placeholder="请选择" clearable>
            <el-option label="待开始" :value="1"></el-option>
            <el-option label="展示中" :value="2"></el-option>
            <el-option label="已过期" :value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeHandle"> 取消 </el-button>
        <el-button type="primary" @click="submitHandle"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
    
<script>
import permission from "@/directive/permission/index.js";
import Pagination from "@/components/Pagination";
import * as api from "@/api/picvideo/index";
import ImgUpload from "@/components/ImgUpload";
import city from '../../../../mock/city.json'
export default {
  name: "",
  components: { Pagination, ImgUpload },
  directives: { permission },
  data() {
    return {
      resourcesUrl: process.env.VUE_APP_RESOURCES_URL,
      // 查询的参数
      pageQuery: {
        pageSize: 10,
        pageNum: 1,
      },
      // 查询的参数
      searchParam: {
        screenType:null,
        taskStatus: null,
        createTime: null,
        province: null,
        city: null,
        area: null
      },
      // 返回参数
      pageVO: {
        list: [], // 返回的列表
        total: 0, // 一共多少条数据
        pages: 0, // 一共多少页
      },
      // loading
      pageLoading: false,
      addOrUpdatetitle: "",
      addOrUpdateVisible: false,
      topPicvisible: false,
      barPicvisible: false,
      clientScreen: {},
      topScreen: {},
      detailObj: {},
      screenArea: [],
      rules: {
        area: [{ required: true, message: '请选择图频区域', trigger: 'blur' }],
        screenType: [{ required: true, message: '请选择图频位置', trigger: 'blur' }],
        screenUrl: [{ required: true, message: '请选择图频图片', trigger: 'blur' }],
        topScreenDefaultUrl: [{ required: true, message: '请选择图频图片', trigger: 'blur' }],
        clientScreenDefaultUrl: [{ required: true, message: '请选择图频图片', trigger: 'blur' }],
        taskTime: [{ required: true, message: '请选择任务日期', trigger: 'blur' }],
        taskStatus: [{ required: true, message: '请选择任务状态', trigger: 'blur' }],
      },
      areaList: [],
    };
  },
  mounted() {
    this.getPage();
    this.getArea()
  },
  methods: {
    topPic() {
      this.topPicvisible = true;
    },
    barPic() {
      this.barPicvisible = true;
    },
    getPage() {
      let startAt = ''
      let endAt = ''
      this.pageLoading = true
      const {screenType, taskStatus, createTime, province, city, area} = this.searchParam
      if(this.searchParam && this.searchParam && this.searchParam.createTime && this.searchParam.createTime.length > 0){
        startAt = createTime[0]
        endAt = createTime[1]
      }
      api.getPage({ ...this.pageQuery, screenType, taskStatus, startAt, endAt, province, city, area }).then((pageVO) => {
        this.pageVO = pageVO;
        this.pageLoading = false;
      });
    },
    getArea() {
      city.forEach(item => {
        item.label = item.province
        item.value = item.province
        if (item.citys && item.citys.length > 0) {
          item.children = item.citys
          item.children.forEach(i => {
            i.label = i.city
            i.value = i.city
            if (i.areas && i.areas.length > 0) {
              i.children = i.areas
              i.children.forEach(v => {
                v.label = v.area
                v.value = v.area
              })
            }
          })
        }
      })
      this.areaList = city
    },
    addOrUpdateHandle() {
      this.addOrUpdateVisible = true;
      this.addOrUpdatetitle = "新增任务";
      this.detailObj = {}
    },
    handleView(obj) {
      this.detailObj = JSON.parse(JSON.stringify(obj))
      this.addOrUpdateVisible = true;
      this.addOrUpdatetitle = "编辑";
      this.screenArea = [this.detailObj.province, this.detailObj.city, this.detailObj.area]
      this.detailObj.taskTime = [obj.startTime, obj.endTime]
    },
    
    clearSearchInfo() {
      // 若请求参数某项没值，则不传此参数
      this.pageQuery.pageNum = 1;
      this.pageQuery.pageSize = 10;
      delete this.searchParam.screenType
      delete this.searchParam.taskStatus
      delete this.searchParam.province
      delete this.searchParam.screenArea
      delete this.searchParam.city
      delete this.searchParam.area
      delete this.searchParam.startAt
      delete this.searchParam.endAt
      delete this.searchParam.createTime
      delete this.searchParam.area
      this.getPage();
    },
    topScreenHandle() {
      this.$refs['topScreen'].validate((valid) => {
        if (valid) {
          api.updateTopScreenDefaultUrl(this.topScreen.topScreenDefaultUrl).then(res=>{
            this.getPage();
            this.topPicvisible = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    clientScreenHandle() {
      this.$refs['clientScreen'].validate((valid) => {
        if (valid) {
          api.updateClientScreenDefaultUrl(this.clientScreen.clientScreenDefaultUrl).then(res=>{
            this.getPage();
            this.barPicvisible = false;
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleChange1(e) {
      if(e.length > 0) {
        this.searchParam.province = e[0]
        this.searchParam.city = e[1]
        this.searchParam.area = e[2]
      } else {
        this.searchParam.province = ''
        this.searchParam.city = ''
        this.searchParam.area = ''
      }
      console.log(this.searchParam)
    },
    handleChange2(e) {
      if(e.length > 0) {
        this.detailObj.province = e[0]
        this.detailObj.city = e[1]
        this.detailObj.area = e[2]
      } else {
        this.detailObj.province = null
        this.detailObj.city = null
        this.detailObj.area = null
      }
    },
    submitHandle() {
      this.$refs['detailForm'].validate((valid) => {
        if (valid) {
          this.detailObj.startTime = this.detailObj.taskTime[0]
          this.detailObj.endTime = this.detailObj.taskTime[1]
          delete this.detailObj.taskTime
          if(this.addOrUpdatetitle == '新增任务') {
            api.addsave(this.detailObj).then(res => {
              this.getPage();
              this.addOrUpdateVisible = false;
            })
          } else {
            delete this.detailObj.isDel
            api.putsave(this.detailObj).then(res => {
              this.getPage();
              this.addOrUpdateVisible = false;
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    closeHandle() {
      this.addOrUpdateVisible = false
      this.topPicvisible = false
      this.barPicvisible = false
      this.$refs['detailForm'] && this.$refs['detailForm'].resetFields();
      this.$refs['topScreen'] && this.$refs['topScreen'].resetFields();
      this.$refs['clientScreen'] && this.$refs['clientScreen'].resetFields();
    }
  },
};
</script>
    
<style lang="scss" scoped>
.mod-hot-search {
  .el-form--inline {
    .el-form-item {
      margin-right: 20px;
    }
  }
}
.addpic {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  .dbzdpic {
    display: flex;
    .pic {
      margin-right: 30px;
      border: 1.5px solid #ccc;
      height: 40px;
      line-height: 40px;
      padding: 0 15px;
      border-radius: 8px;
      cursor: pointer;
    }
  }
}
</style>
    